<template>
  <div class="app-container">
    <div v-if="env === 'control'" class="filter-container" style="width: 612px;">
      <el-alert title="点击专场前往竞拍控制台" type="warning" />
    </div>
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="搜索专场" style="width: 300px;margin-right: 10px;" @keyup.enter.native="handleFilter">
        <el-button slot="append" icon="el-icon-search" @click="handleFilter" />
      </el-input>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      @row-click="handleRowClick"
    >
      <el-table-column align="center" label="ID" prop="id" width="80" />
      <el-table-column show-overflow-tooltip class-name="lot-name" align="center" label="专场名称" prop="name" width="250" />
      <el-table-column align="center" label="专场时间" prop="time" width="280">
        <template slot-scope="scope">
          {{ scope.row.time_format[0] === scope.row.time_format[1] ? scope.row.time_format[0] : scope.row.time_format.join(' ~ ') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="拍品件数" prop="num" width="80" />
    </el-table>

    <div v-show="total > 0" class="pagination-container">
      <el-pagination background :current-page="listQuery.page" :page-sizes="[15, 20, 30]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import { getLots } from '@/api/ctrl'
import { parseTime } from '@/utils/index'
export default {
  data () {
    return {
      listQuery: {
        page: 1,
        limit: 20,
        name: ''
      },
      list: [],
      total: 0,
      listLoading: true,
      env: process.env.VUE_APP_ROLE
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.listLoading = true
      getLots(this.listQuery).then(res => {
        res.data.list.forEach(el => {
          el.time_format = [parseTime(el.time[0], '{y}-{m}-{d} {h}:{i}'), parseTime(el.time[1], '{y}-{m}-{d} {h}:{i}')]
        })
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.listLoading = false
      })
    },
    handleFilter () {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleSizeChange (val) {
      this.listQuery.limit = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.fetchData()
    },
    handleRowClick (row) {
      // const routeData = this.$router.resolve({ path: `/${row.id}` })
      // window.open(routeData.href, '_blank')
      this.$router.push(`/${row.id}`)
    }
  }
}
</script>

<style lang="scss">
.el-table {
  width: fit-content;
  margin-bottom: 20px;
  .lot-name {
    cursor: pointer;
    text-decoration: underline;
  }
}
</style>
